<template>
  <div>
    <el-drawer :visible.sync="dialogVisible" direction="rtl" size="50%">
      <h3 slot="title">查看商品详细信息</h3>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div v-for="(e, i) in infoList" :key="i" class="item">
          <div class="info-label">{{ e.label }}</div>
          <div class="info-value">{{ e.value }}</div>
        </div>
        <div class="item">
          <div class="info-label">商品推荐：</div>
          <div class="info-value">
            <el-checkbox-group v-model="featured">
              <el-checkbox :label="1" disabled>新品</el-checkbox>
              <el-checkbox :label="2" disabled>推荐</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="item">
          <div class="info-label">服务保证：</div>
          <div class="info-value">
            <el-checkbox-group v-model="assurance">
              <el-checkbox label="1" disabled>无忧退货</el-checkbox>
              <el-checkbox label="2" disabled>快速退款</el-checkbox>
              <el-checkbox label="3" disabled>免费包邮</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="item">
          <div class="info-label">商品轮播图：</div>
          <div class="info-value">
            <el-image style="width: 200px;margin:0 10px 10px 0" :preview-src-list="[$http.staticURL + e]" :src="$http.staticURL + e" fit="scale-down" v-for="(e,i) in banners" :key="i"></el-image>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品规格</span>
        </div>
        <el-table :data="ggList" border>
          <el-table-column prop="id" label="id" />
          <el-table-column prop="name" label="规格名称" />
          <el-table-column prop="cost" label="成本价" />
          <el-table-column prop="price" label="零售价" />
          <el-table-column prop="market" label="市场价" />
          <el-table-column prop="stock" label="库存" />
          <el-table-column label="缩略图">
            <template slot-scope="scope">
              <el-image style="width: 80px" :src="$http.staticURL + scope.row.img" fit="scale-down"/>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品详情</span>
        </div>
        <div class="item">
          <div class="info-label">商品详情图：</div>
          <div class="info-value">
            <el-image style="width: 200px;margin:0 10px 10px 0" :preview-src-list="[$http.staticURL + e]" :src="$http.staticURL + e" fit="scale-down" v-for="(e,i) in imgDetail" :key="i"></el-image>
          </div>
        </div>
      </el-card>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      goodsData:{},
      featured: [],
      assurance: [],
      infoList: [],
      banners:[],
      ggList:[],
      imgDetail:[]
    }
  },
  methods: {
    init(val) {
      this.dialogVisible = true
      console.log(val, '查看数据')
      this.getByid(val)
    },
    getByid(val){
      this.$http.httpPost('products/productsDetail',{id:val.id}).then(res=>{
        let result = res.data
        console.log(result);
        if(result.code === 0){
          this.goodsData = result.data.data[0]
          this.getrowData(val)
        }else{
           this.goodsData = {}
        }
       
      })
    },
    getrowData(val){
      this.featured =  JSON.parse(val.featured)
      this.assurance = JSON.parse(val.assurance)
      this.banners = JSON.parse(val.imgs)
      this.ggList = JSON.parse(val.specification)
      this.imgDetail = JSON.parse(val.detail)
      this.infoList = [
        { label: '商品名称：', value: val.name },
        { label: '商品品牌：', value: val.brand_name },
        { label: '商品供应商：', value: this.goodsData.rname },
        { label: '所属分类：', value: this.goodsData.cname + '-' + this.goodsData.cname2 },
        { label: '商品关键词：', value: val.keyword },
        { label: '商品标题：', value: val.title },
        { label: '商品描述：', value: val.product_desc },
        { label: '商品货号：', value: val.code },
        { label: '服务范围：', value: val.area },
        { label: '质保期限：', value: val.exp_month + '月' },
        { label: '上架时间：', value: val.sale_start_time },
        { label: '下架时间：', value: val.sale_end_time }
      ]
    },
    lookOrder() {
      this.$router.push({ path: '/orders/ordersList', query: { userID: 123 } })
    }
  }
}
</script>
<style lang="less" scoped>
.item {
  padding: 10px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .info-label {
    width: 110px;
    text-align: right
  }
  .info-value {
    flex:1;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

  }
}
</style>
